import React, { Component } from 'react'
import {Switch, Route, NavLink} from 'react-router-dom'
import Pagea from './Pagea'
import Pageb from './Pageb'
import Pagec from './Pagec'

export default class Layout extends Component {
  render() {
    return (
      <div>
        <p>首页-top组件</p>
        <p>其他固定内容....</p>
        <NavLink to="/layout/pagea">pagea</NavLink>
        <NavLink to="/layout/pageb">pageb</NavLink>
        <NavLink to="/layout/pagec">pagec</NavLink>
        {/* 以下是嵌套路由对应的路由组件 */}
        {/* vue中将所有的路由及集中在router中处理；react将嵌套路由放在父组件中处理 */}
        <Switch>
        {/* 完整的路由地址是：父路由+子路由 */}
          <Route path="/layout/pagea" component={Pagea}></Route>
          <Route path="/layout/pageb" component={Pageb}></Route>
          <Route path="/layout/pagec" component={Pagec}></Route>
        </Switch>
      </div>
    )
  }
}
